<template>
    <view class="designer_dynamic_page flex-col">

        <view class="group_3 flex-col">
            <view class="box_5 flex-row">
                <image class="single-avatar_1" referrerpolicy="no-referrer"
                    src="https://mall-applets.oss-cn-chengdu.aliyuncs.com/static/MasterDDSSlicePNGd87bb792a3a2f0f0522b256a103cfe47.png" />
                <text class="text_3">张艺欢</text>
                <view class="block_1 flex-col justify-between">
                    <div class="group_4 flex-col"></div>
                    <text class="text_4">10年经验</text>
                </view>
            </view>
            <view class="box_6 flex-row justify-between">
                <view class="group_5 flex-col"></view>
                <view class="tag_1 flex-col"></view>
            </view>
            <text class="text_5">
                今天超级开心，我主设的「华侨城天澜美墅别墅」现代简约风已经开始收尾。期待最终效果。
            </text>
            <view class="image-wrapper_1 flex-row">
                <image class="image_2" referrerpolicy="no-referrer" :src="item.lanhuimage0"
                    v-for="(item, index) in loopData0" :key="index" />
            </view>
            <view class="box_7 flex-row">
                <text class="text_6">&nbsp;10:52</text>
                <view class="icon_2 flex-col">
                    <image class="thumbnail_5" referrerpolicy="no-referrer"
                        src="https://mall-applets.oss-cn-chengdu.aliyuncs.com/static/MasterDDSSlicePNGfe3c7b78808a51176c3173429cced111.png" />
                </view>
                <text class="text_7">82</text>
                <view class="icon_3 flex-col">
                    <image class="thumbnail_6" referrerpolicy="no-referrer"
                        src="https://mall-applets.oss-cn-chengdu.aliyuncs.com/static/MasterDDSSlicePNG1c68bdb48f34243e37ee3ae91d72da3f.png" />
                </view>
                <text class="text_8">82</text>
            </view>
            <view class="box_8 flex-row justify-between">
                <view class="group_6 flex-col"></view>
                <view class="tag_2 flex-col"></view>
            </view>
            <text class="text_9">
                今天超级开心，我主设的「华侨城天澜美墅别墅」现代简约风已经开始收尾。期待最终效果。
            </text>
            <view class="box_9 flex-row justify-between">
                <view class="image-text_1 flex-col justify-between">
                    <image class="image_3" referrerpolicy="no-referrer"
                        src="https://mall-applets.oss-cn-chengdu.aliyuncs.com/static/MasterDDSSlicePNGc91abc343508e6c27fc98bfd239b5104.png" />
                    <text class="text-group_1">&nbsp;10:52</text>
                </view>
                <view class="block_2 flex-col justify-between">
                    <image class="image_4" referrerpolicy="no-referrer"
                        src="https://mall-applets.oss-cn-chengdu.aliyuncs.com/static/MasterDDSSlicePNGc91abc343508e6c27fc98bfd239b5104.png" />
                    <view class="group_7 flex-row">
                        <view class="image-text_2 flex-row justify-between">
                            <image class="icon_4" referrerpolicy="no-referrer"
                                src="https://mall-applets.oss-cn-chengdu.aliyuncs.com/static/MasterDDSSlicePNG996de9cdadb73e4164fc636de7405eb1.png" />
                            <text class="text-group_2">82</text>
                        </view>
                        <image class="icon_5" referrerpolicy="no-referrer"
                            src="https://mall-applets.oss-cn-chengdu.aliyuncs.com/static/MasterDDSSlicePNG1c68bdb48f34243e37ee3ae91d72da3f.png" />
                        <text class="text_10">82</text>
                    </view>
                </view>
            </view>
            <text class="text_11">3月20日</text>
            <text class="text_12">3月20日</text>
        </view>
    </view>
</template>
<script setup>
import { } from 'vue'

const loopData0 = [
    {
        lanhuimage0:
            'https://mall-applets.oss-cn-chengdu.aliyuncs.com/static/MasterDDSSlicePNGc4bb42cf711f511e22e8f530902026aa.png',
    },
    {
        lanhuimage0:
            'https://mall-applets.oss-cn-chengdu.aliyuncs.com/static/MasterDDSSlicePNGc4bb42cf711f511e22e8f530902026aa.png',
    },
    {
        lanhuimage0:
            'https://mall-applets.oss-cn-chengdu.aliyuncs.com/static/MasterDDSSlicePNGc4bb42cf711f511e22e8f530902026aa.png',
    },
    {
        lanhuimage0:
            'https://mall-applets.oss-cn-chengdu.aliyuncs.com/static/MasterDDSSlicePNGbb24573127aedaa49ed2704693aaeedf.png',
    },
]
</script>
<style scoped lang="scss">
.designer_dynamic_page {
    background-color: rgba(255, 255, 255, 1);
    position: relative;
    width: 750rpx;
    height: 1624rpx;
    overflow: hidden;

    .group_1 {
        width: 750rpx;
        height: 176rpx;
        background: url(https://mall-applets.oss-cn-chengdu.aliyuncs.com/static/MasterDDSSlicePNG7cab3346f8788563295785e5499d67fa.png) 100% no-repeat;
        background-size: 100% 100%;

        .box_1 {
            width: 682rpx;
            height: 36rpx;
            margin: 30rpx 0 0 42rpx;

            .text_1 {
                width: 108rpx;
                height: 36rpx;
                overflow-wrap: break-word;
                color: rgba(0, 0, 0, 1);
                font-size: 30rpx;
                letter-spacing: -0.30000001192092896px;
                font-family: AlibabaPuHuiTi-Regular;
                font-weight: normal;
                text-align: center;
                white-space: nowrap;
                line-height: 36rpx;
            }

            .thumbnail_1 {
                width: 34rpx;
                height: 22rpx;
                margin: 6rpx 0 0 438rpx;
            }

            .thumbnail_2 {
                width: 32rpx;
                height: 22rpx;
                margin: 6rpx 0 0 10rpx;
            }

            .image_1 {
                width: 50rpx;
                height: 24rpx;
                margin: 6rpx 0 0 10rpx;
            }
        }

        .box_2 {
            width: 750rpx;
            height: 102rpx;
            margin: 10rpx 0 2rpx 0;

            .nav-bar_1 {
                width: 750rpx;
                height: 100rpx;

                .icon_1 {
                    width: 18rpx;
                    height: 34rpx;
                    margin: 40rpx 0 0 36rpx;
                }

                .text_2 {
                    width: 168rpx;
                    height: 40rpx;
                    overflow-wrap: break-word;
                    color: rgba(0, 0, 0, 0.9);
                    font-size: 34rpx;
                    font-family: AlibabaPuHuiTi-Regular;
                    font-weight: normal;
                    text-align: center;
                    white-space: nowrap;
                    line-height: 40rpx;
                    margin: 32rpx 0 0 238rpx;
                }

            }

            .group_2 {
                background-color: rgba(0, 0, 0, 0.1);
                height: 2rpx;
                width: 750rpx;

                .box_4 {
                    background-color: rgba(0, 0, 0, 0.1);
                    width: 750rpx;
                    height: 2rpx;
                }
            }
        }
    }

    .group_3 {
        position: relative;
        width: 750rpx;
        height: 1450rpx;
        margin-bottom: 2rpx;

        .box_5 {
            width: 332rpx;
            height: 80rpx;
            margin: 34rpx 0 0 30rpx;

            .single-avatar_1 {
                width: 80rpx;
                height: 80rpx;
            }

            .text_3 {
                width: 96rpx;
                height: 40rpx;
                overflow-wrap: break-word;
                color: rgba(51, 51, 51, 1);
                font-size: 32rpx;
                font-family: Songti SC-黑体;
                font-weight: normal;
                text-align: left;
                white-space: nowrap;
                line-height: 40rpx;
                margin: 20rpx 0 0 20rpx;
            }

            .block_1 {
                width: 112rpx;
                height: 26rpx;
                margin: 26rpx 0 0 24rpx;

                .group_4 {
                    width: 34rpx;
                    height: 2rpx;
                }

                .text_4 {
                    width: 106rpx;
                    height: 24rpx;
                    overflow-wrap: break-word;
                    color: rgba(0, 0, 0, 1);
                    font-size: 26rpx;
                    font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
                    font-weight: normal;
                    text-align: left;
                    white-space: nowrap;
                    line-height: 24rpx;
                    margin-left: 6rpx;
                }
            }
        }

        .box_6 {
            width: 166rpx;
            height: 36rpx;
            margin: 36rpx 0 0 30rpx;

            .group_5 {
                border-radius: 50%;
                width: 20rpx;
                height: 20rpx;
                border: 2px solid rgba(97, 52, 27, 1);
                margin-top: 8rpx;
            }

            .tag_1 {
                background-color: rgba(97, 52, 27, 0.07);
                border-radius: 1px;
                width: 128rpx;
                height: 36rpx;
            }
        }

        .text_5 {
            width: 636rpx;
            height: 80rpx;
            overflow-wrap: break-word;
            color: rgba(36, 36, 36, 1);
            font-size: 28rpx;
            font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
            font-weight: normal;
            text-align: left;
            line-height: 40rpx;
            margin: 16rpx 0 0 68rpx;
        }

        .image-wrapper_1 {
            width: 410rpx;
            height: 410rpx;
            flex-wrap: wrap;
            margin: 20rpx 0 0 70rpx;

            .image_2 {
                width: 200rpx;
                height: 200rpx;
                margin: 0 10rpx 10rpx 0;

                &:nth-child(2n) {
                    margin-right: 0;
                }

                &:nth-last-child(-n + 2) {
                    margin-bottom: 0;
                }
            }
        }

        .box_7 {
            width: 604rpx;
            height: 40rpx;
            margin: 20rpx 0 0 82rpx;

            .text_6 {
                width: 78rpx;
                height: 40rpx;
                overflow-wrap: break-word;
                color: rgba(153, 153, 153, 1);
                font-size: 26rpx;
                font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
                font-weight: normal;
                text-align: left;
                white-space: nowrap;
                line-height: 40rpx;
            }

            .icon_2 {
                height: 30rpx;
                width: 30rpx;
                margin: 6rpx 0 0 354rpx;

                .thumbnail_5 {
                    width: 30rpx;
                    height: 30rpx;
                }
            }

            .text_7 {
                width: 34rpx;
                height: 40rpx;
                overflow-wrap: break-word;
                color: rgba(102, 102, 102, 1);
                font-size: 28rpx;
                font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
                font-weight: normal;
                text-align: left;
                white-space: nowrap;
                line-height: 40rpx;
                margin-left: 6rpx;
            }

            .icon_3 {
                height: 32rpx;
                width: 32rpx;
                margin: 4rpx 0 0 30rpx;

                .thumbnail_6 {
                    width: 32rpx;
                    height: 32rpx;
                }
            }

            .text_8 {
                width: 34rpx;
                height: 40rpx;
                overflow-wrap: break-word;
                color: rgba(102, 102, 102, 1);
                font-size: 28rpx;
                font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
                font-weight: normal;
                text-align: left;
                white-space: nowrap;
                line-height: 40rpx;
                margin-left: 6rpx;
            }
        }

        .box_8 {
            width: 166rpx;
            height: 36rpx;
            margin: 56rpx 0 0 30rpx;

            .group_6 {
                border-radius: 50%;
                width: 20rpx;
                height: 20rpx;
                border: 2px solid rgba(97, 52, 27, 1);
                margin-top: 8rpx;
            }

            .tag_2 {
                background-color: rgba(97, 52, 27, 0.07);
                border-radius: 1px;
                width: 128rpx;
                height: 36rpx;
            }
        }

        .text_9 {
            width: 636rpx;
            height: 80rpx;
            overflow-wrap: break-word;
            color: rgba(36, 36, 36, 1);
            font-size: 28rpx;
            font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
            font-weight: normal;
            text-align: left;
            line-height: 40rpx;
            margin: 16rpx 0 0 68rpx;
        }

        .box_9 {
            width: 616rpx;
            height: 360rpx;
            margin: 20rpx 0 110rpx 70rpx;

            .image-text_1 {
                width: 300rpx;
                height: 360rpx;

                .image_3 {
                    width: 300rpx;
                    height: 300rpx;
                }

                .text-group_1 {
                    width: 78rpx;
                    height: 40rpx;
                    overflow-wrap: break-word;
                    color: rgba(153, 153, 153, 1);
                    font-size: 26rpx;
                    font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
                    font-weight: normal;
                    text-align: left;
                    white-space: nowrap;
                    line-height: 40rpx;
                    margin: 20rpx 0 0 12rpx;
                }
            }

            .block_2 {
                width: 300rpx;
                height: 360rpx;

                .image_4 {
                    width: 300rpx;
                    height: 300rpx;
                }

                .group_7 {
                    width: 172rpx;
                    height: 40rpx;
                    margin: 20rpx 0 0 128rpx;

                    .image-text_2 {
                        width: 70rpx;
                        height: 40rpx;

                        .icon_4 {
                            width: 30rpx;
                            height: 30rpx;
                            margin-top: 6rpx;
                        }

                        .text-group_2 {
                            width: 34rpx;
                            height: 40rpx;
                            overflow-wrap: break-word;
                            color: rgba(102, 102, 102, 1);
                            font-size: 28rpx;
                            font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
                            font-weight: normal;
                            text-align: left;
                            white-space: nowrap;
                            line-height: 40rpx;
                        }
                    }

                    .icon_5 {
                        width: 32rpx;
                        height: 32rpx;
                        margin: 4rpx 0 0 30rpx;
                    }

                    .text_10 {
                        width: 34rpx;
                        height: 40rpx;
                        overflow-wrap: break-word;
                        color: rgba(102, 102, 102, 1);
                        font-size: 28rpx;
                        font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
                        font-weight: normal;
                        text-align: left;
                        white-space: nowrap;
                        line-height: 40rpx;
                        margin-left: 6rpx;
                    }
                }
            }
        }

        .text_11 {
            position: absolute;
            left: 88rpx;
            top: 148rpx;
            width: 88rpx;
            height: 40rpx;
            overflow-wrap: break-word;
            color: rgba(97, 52, 27, 1);
            font-size: 24rpx;
            font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
            font-weight: normal;
            text-align: left;
            white-space: nowrap;
            line-height: 40rpx;
        }

        .text_12 {
            position: absolute;
            left: 88rpx;
            top: 826rpx;
            width: 88rpx;
            height: 40rpx;
            overflow-wrap: break-word;
            color: rgba(97, 52, 27, 1);
            font-size: 24rpx;
            font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
            font-weight: normal;
            text-align: left;
            white-space: nowrap;
            line-height: 40rpx;
        }
    }
}
</style>